<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>Document</title>
  <style>
    #box{
      position: relative;
      width: 300px;
      margin: 0 auto;
    }

    #face{
      background-image: url(images/face.png);
      background-size: cover;
      width: 300px;
      height: 300px;
      position: absolute;
      z-index: 2;
      opacity: 0.5;
    }

    #eyeLeft{
      background-image: url(images/eye.png);
      background-size: cover;
      width: 40px;
      height: 40px;
      position: absolute;
      top: 90px;
      left: 100px;
      z-index: 9;
      border-radius: 50%;
    }

    #eyeRight{
      background-image: url(images/eye.png);
      background-size: cover;
      width: 40px;
      height: 40px;
      position: absolute;
      top: 90px;
      left: 190px;
      z-index: 9;
      border-radius: 50%;
    }

    #glass{
      background-image: url(images/glass.png);
      background-size: cover;
      width: 300px;
      height: 300px;
      position: absolute;
    }
    #text1 {
   
    }
    .bottom {
      position: fixed;
     top: 40vh;
     height: 100vh;
    }
  </style>
</head>
<body>
  <div>
    <div id="box">
      <div id="face"></div>
      <div id="eyeLeft"></div>
      <div id="eyeRight"></div>
      <div id="glass"></div>
      <div id="log"></div>
    </div>
    <div class="bottom">
      <p id="text"></p>
      <p id="text1"></p>
      <button onClick="getPermission(1)">授权</button>
    </div>
   
  </div>

<script>


 
const getPermission=(e) => {
  console.error(66666666666,e);
  document.querySelector('#text1').innerHTML =e;




  if (window.DeviceOrientationEvent !== undefined && typeof window.DeviceOrientationEvent.requestPermission === 'function') {
    window.DeviceOrientationEvent.requestPermission()
        .then(function (response) {
          document.querySelector('#text1').innerHTML =response;
          document.querySelector('#text').innerHTML =typeof window.DeviceOrientationEvent.requestPermission;
            if (response == 'granted') {
                 onTestGyro();
                 document.querySelector('#text').innerHTML =3;
            }else{

            }
        }).catch(function (error) {
            console.log("error", error);
        });

} else {
    console.log("启动")
     onTestGyro();
}
}
document.querySelector('#box').addEventListener('click',()=> {
  getPermission(0)

})
var eyeLeftPosition = {
  start: [70, 78],
  end: [100, 110]
};

var eyeRightPosition = {
  start: [150, 78],
  end: [190, 110]
};

var eyeLeftCenterPosition = {
  x: (eyeLeftPosition.end[0] - eyeLeftPosition.start[0]) / 2 + eyeLeftPosition.start[0],
  y: (eyeLeftPosition.end[1] - eyeLeftPosition.start[1]) / 2 + eyeLeftPosition.start[1]
};

var eyeRightCenterPosition = {
  x: (eyeRightPosition.end[0] - eyeRightPosition.start[0]) / 2 + eyeRightPosition.start[0],
  y: (eyeRightPosition.end[1] - eyeRightPosition.start[1]) / 2 + eyeRightPosition.start[1]
};

var r = 40;

var eyeLeft = document.querySelector('#eyeLeft');
var eyeRight = document.querySelector('#eyeRight');

// let dd  = new DeviceOrientationEvent('deviceorientation', {
//   frequency: 1000,
// });
// console.error(dd,'window.DeviceOrientationEvent');
// document.querySelector('#text1').innerHTML =dd.alpha;


const onTestGyro = ()=> {
  if (window.DeviceOrientationEvent) {
  // document.querySelector('#text1').innerHTML = window.DeviceOrientationEvent;
  window.addEventListener('deviceorientation', function (event) {

    let {alpha, beta, gamma} = event;
document.querySelector('#text').innerHTML = alpha+','+ beta+','+ gamma;
    eyeLeft.style.left = eyeLeftCenterPosition.x + gamma / 90 * r + 'px';
    eyeRight.style.left = eyeRightCenterPosition.x + gamma / 90 * r + 'px';
    eyeLeft.style.top = eyeRight.style.top 
                      = eyeLeftCenterPosition.y + beta / 180 * r + 'px';


    eyeRight.style.transform = eyeLeft.style.transform 
                         = eyeRight.style.WebkitTransform 
                         = eyeLeft.style.WebkitTransform 
                         = 'rotate(' + alpha + 'deg)';
  });
} else {
  document.querySelector('body').innerHTML = '浏览器不支持DeviceOrientationEvent';
}
}


if (window.DeviceOrientationEvent !== undefined && typeof window.DeviceOrientationEvent.requestPermission === 'function') {
    window.DeviceOrientationEvent.requestPermission()
        .then(function (response) {
            if (response == 'granted') {
                 onTestGyro();
            }else{

            }
        }).catch(function (error) {
            console.log("error", error);
        });

} else {
    console.log("启动")
     onTestGyro();
}

// window.requestAnimationFrame(() => {
//   // document.querySelector('#text1').innerHTML = window.DeviceOrientationEvent;
// })
</script>
</body>
</html>



